<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示服务器列表</title>
    <script src="../layui/layui.all.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">实时监控</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 400
            ,url: '/status/list' //数据接口
            ,toolbar: 'default'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            }
            ,page: true //开启分页
            ,cols: [[ //表头
                 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'cpuUsage', title: 'cpu负载',sort: true, width:120}
                ,{field: 'memoryUsage', title: '内存使用率',sort: true, width:140}
                ,{field: 'diskUsage', title: '硬盘使用率',sort: true, width:140}
                ,{field: 'serverIp', title: '服务器ip地址', width:180}
                ,{field: 'createTime', title: '创建时间', width:180}
                ,{field: 'createTime', title: '在线/离线', width:120,
                    templet: function(d){
                        //得到当前行数据，并拼接成自定义模板
                        return getTimeDiff(d.createTime)
                    }
                }
                ,{ title: '操作',toolbar: '#barDemo', width:120}

            ]]
        });
        // 单元格工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                //进入一个新的监控页面
                console.log(data.serverIp)
                window.open("detail.html?serverIp="+data.serverIp);
            }
        });

    });
    //传入一个时间，判断跟当前时间是否相差60秒
    function getTimeDiff(createTime ) {
        const second=60;
        const diff = new Date().getTime() - new Date(createTime).getTime();
        const diffInSeconds = Math.floor(diff / 1000);
        //如果大于60秒，离线
        if(diffInSeconds>60){
            return "<span style=\"color: darkorange\">离线</span>";
        }
        return "<span style=\"color: green\">在线</span>";
    }
</script>
</body>

</html>
